<template>
  <view class="">
    <nut-popup
      position="bottom"
      round
      :style="{ height: '86%' }"
      v-model:visible="state.isVisible"
    >
      <view class="popup-content">
        <view class="popup-content-box">
          <view class="popup-content-title">
            <view
              class="popup-cancel"
              @click="cancel"
              >取消</view
            >
            <view class="popup-title">选择人员</view>
            <view
              class="popup-confirm"
              @click="confirmSelectedUser"
              >确认</view
            >
          </view>
          <view class="popup-content-search">
            <nut-searchbar
              v-model="searchValue"
              placeholder="搜索"
            >
              <template v-slot:leftin>
                <i
                  class="iconfont icon-sousuo"
                  style="font-size: 20px; color: #666"
                ></i>
              </template>
            </nut-searchbar>
          </view>
          <view class="popup-content-list">
            <view class="selected-user-box">
              <text class="popup-con-title">选择联系人</text>
              <view
                class="selected-user"
                @click="viewSelectedUser"
              >
                <view class="selected-text">
                  <text>已选择</text>
                </view>
                <view class="selected-user-list">
                  <view class="selected-user-img">
                    <img
                      v-for="selected in selecteduserList"
                      :key="selected.id"
                      :src="selected.avatarUrls"
                      alt=""
                    />
                  </view>
                  <i class="iconfont icon-youjiantou1"></i>
                </view>
              </view>
            </view>
            <selectPerson
              :userList="userList"
              @selecteduserList="getSelecteduserList"
              :feedbackUsers="selecteduserList"
              :disabledList="disabledList"
              :isUserPopup="state.isVisible"
              :isSingle="isSingle"
            />
          </view>
        </view>
      </view>
    </nut-popup>
    <viewPersonPopup
      :isviewPersonPopup="isviewPersonPopup"
      @update:visible="viewVisible"
      @selectedUsers="handleSelectedUsers"
      :feedbackUsers="selecteduserList"
    />
  </view>
</template>

<script setup lang="ts">
import { reactive, watch, ref } from "vue";
import selectPerson from "@/components/selectPerson/index.vue";
import { getUserList } from "@/api/index";
import Taro from "@tarojs/taro";
import viewPersonPopup from "@/components/viewPersonPopup/index.vue";
import { userInfoStore } from "@/stores/userInfoStore";
const store = userInfoStore();
const isviewPersonPopup = ref(false); // 是否显示查看用户弹窗
const emit = defineEmits(["update:visible", "selectedUsers"]);
const props = defineProps(["isUserPopup", "feedbackUsers", "disabledList", "isSingle"]);
const disabledList = ref(props.disabledList);
const isSingle = ref(props.isSingle);

const selecteduserList = ref([]);
const searchValue = ref("");
const userList = ref([]);
const state = reactive({
  isVisible: props.isUserPopup,
});

watch(
  () => props.feedbackUsers,
  val => {
    selecteduserList.value = val;
  },
);
watch(
  () => store.isUserPopup,
  val => {
    state.isVisible = val;
    if (val && !userList.value.length) {
      handleUserList();
    }
    disabledList.value = props.disabledList;
    isSingle.value = props.isSingle;
  },
);
watch(
  () => props.isUserPopup,
  val => {
    state.isVisible = val;
    console.log(val, "props.isUserPopup222");

    if (val) {
      handleUserList();
    }
  },
);
watch(
  () => state.isVisible,
  val => {
    emit("update:visible", val);
    store.isUserPopup = val;
    // handleUserList();
  },
);

const handleSelectedUsers = (val: any) => {
  selecteduserList.value = val;
};
// 查看已选择人员
const viewSelectedUser = () => {
  isviewPersonPopup.value = true;
  emit("selectedUsers", selecteduserList.value);
};
const viewVisible = (val: boolean) => {
  isviewPersonPopup.value = val;
};
// 确认选择人员
const confirmSelectedUser = () => {
  if (!selecteduserList.value.length) {
    Taro.showToast({
      title: "请选择人员",
      icon: "none",
    });
    return;
  }
  emit("selectedUsers", selecteduserList.value);
  state.isVisible = false;
};
const getSelecteduserList = val => {
  selecteduserList.value = val;
};
const cancel = () => {
  state.isVisible = false;
  emit("update:visible", false);
};
const handleUserList = () => {
  let params = {
    //   name: searchValue.value,
    // token: Taro.getStorageSync("token"),
  };
  getUserList(params).then(res => {
    userList.value = res.data;
  });
};
</script>

<style lang="less">
@import "./index.less";
</style>
